<template>
  <div
    @mouseenter="isHover(true)"
    @mouseleave="isHover(false)"
    class=" relative brightness-90 hover:brightness-[1.1] cursor-pointer"
  >
    <div class="relative">
      <div
        v-if="!isLoaded"
        class="absolute h-[100%] flex items-center justify-center top-0 left-0 aspect-[3/4] w-full object-cover rounded-md bg-black"
      >
        <Icon class="animate-spin ml-1" name="icon-load-c" size="80" color="#FFFFFF"/>
      </div>
      <video
        v-if="post.video.play_addr.url_list.length!==0&&post.video.play_addr.url_list[0]"
        ref="video"
        muted
        loop
        :controls="hover"
        :class="className"
        v-on:fullscreenchange="onFullscreenChange"
        class="rounded-md aspect-[3/4]"
        :src="post.video.play_addr.url_list[0]"
      />
    </div>
    <div class="px-1" @click="displayPost(post)">
      <div class="text-gray-700 text-[15px] pt-1 break-words line-clamp-2">
        {{ post.desc }}
      </div>
      <div class="flex items-center -ml-1 text-gray-600 font-bold text-xs">
        <Icon name="icon-bar-chart" size="13" class="mr-1 mb-1"/>
        3%
        <Icon class="ml-1" name="icon-gantanhaozhong" size="16"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['post', 'index'],
  data() {
    return {
      video: null,
      className:'object-cover',
      hover: false,
      isLoaded: false
    }
  },
  mounted() {
    this.video = this.$refs.video
    if (this.video) {
      this.video.addEventListener('loadeddata', (e) => {
        if (e.target) {
          setTimeout(() => {
            this.isLoaded = true
          }, 200)
        }
      });
    }
  },
  beforeDestroy() {
    this.video.pause()
    this.video.currentTime = 0
    this.video.src = ''
  },
  methods: {
    onFullscreenChange() {
      if (document.fullscreenElement || document.webkitFullscreenElement) {
       this.className = 'object-contain'
      } else {
        this.className = 'object-cover'
      }
    },
    isHover(bool) {
      if (bool) {
        this.hover = true
        this.video.play()
      } else {
        this.hover = false
        this.video.pause()
      }
    },
    displayPost() {
      try {
        setTimeout(() => this.$router.push(`/postSecond?id=${this.index}`), 200)
      } catch (e) {
        console.log(e)
      }

    }
  }
}
</script>
